import 'package:flutter/material.dart';

class StackLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(
          'Stack层叠布局',
          style: TextStyle(
            fontSize: 30.0,
          ),
        ),
        Text(
          'alignment: 指定未定位或部分定位widget的对齐方式\nPossitoned控件中left,right,bottom:控制布局中的位置',
          style: Theme.of(context).textTheme.title,
        ),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 10.0),
          width: double.infinity,
          height: 500,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blue)
          ),
          child: Stack(
            alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
            children: <Widget>[
              Container(
                child: Text(
                  '未使用Positioned的控件',
                  style: Theme.of(context).textTheme.title,
                ),
              ),
              Positioned(
                left: 18.0,
                bottom: 20.0,
                child: Text(
                  "left:18.0和bottom: 20.0",
                  style: Theme.of(context).textTheme.title,
                ),
              ),
              Positioned(
                top: 10.0,
                child:
                    Text('top: 10.0', style: Theme.of(context).textTheme.title),
              ),
              Positioned(
                top: 150.0,
                right: 30.0,
                child: Text('top: 150.0和right: 30.0,',
                    style: Theme.of(context).textTheme.title),
              ),
            ],
          ),
        )
      ],
    );
  }
}

//class StackLayout extends StatefulWidget {
//  @override
//  State<StatefulWidget> createState() => new _StackLayoutState();
//}
//
//class _StackLayoutState extends State<StackLayout> {
//  @override
//  Widget build(BuildContext context) {
//    return Scaffold(
//      appBar: AppBar(
//        title: Text('层叠布局Stack和Potisioned'),
//      ),
//      body: ConstrainedBox(
//        //通过ConstrainedBox来确保Stack占满屏幕
//        constraints: BoxConstraints.expand(),
//        child: Stack(
//          alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
//          children: <Widget>[
//            Container(
//              child: Text(
//                '未使用Positioned的控件',
//                style: Theme.of(context).textTheme.title,
//              ),
//            ),
//            Positioned(
//              left: 18.0,
//              bottom: 20.0,
//              child: Text(
//                "left:18.0和bottom: 20.0",
//                style: Theme.of(context).textTheme.title,
//              ),
//            ),
//            Positioned(
//              top: 10.0,
//              child:
//                  Text('top: 10.0', style: Theme.of(context).textTheme.title),
//            ),
//            Positioned(
//              top: 150.0,
//              right: 30.0,
//              child:
//                  Text('top: 150.0和right: 30.0,', style: Theme.of(context).textTheme.title),
//            ),
//          ],
//        ),
//      ),
//    );
//  }
//}
